<template>
    <div>
        <div class="myheader">
            <el-input
                v-model="listQuery.commodity_name"
                placeholder="商品名称"
                style="width: 200px;left: 10px;"
                class="filter-item"
                @keyup.enter.native="handleFilter"
            />

            <el-button
                v-waves
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
            >搜索</el-button>
            <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-edit"
                @click="handleCreate"
            >创建商品</el-button>
        </div>

        <el-table :data="tableData" border fit style="margin:0px auto;;width: 98.5%">
            <el-table-column align="center" prop="id" label="id" width="50" />
            <el-table-column align="center" prop="commodity_name" width="240" label="商品名称" />
            <el-table-column prop="url" label="照片" width="240" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.url" width="100" class="head_pic" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="price" width="150" label="价格" />
            <el-table-column align="center" prop="up_time" label="上架时间" />
            <!-- <el-table-column align="center" prop="active" label="状态" /> -->
            <el-table-column prop="active" label="状态" width="140" align="center">
                <template slot-scope="scope">
                    <div>{{scope.row.active === 1 ? '上架' : '下架'}}</div>
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
                align="center"
                width="230"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="{row}">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="handleUpdate(row)"
                    >{{row.active === 1 ? '下架' : '上架'}}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.pageNo"
            :limit.sync="listQuery.pageSize"
            @pagination="getTableData"
        />

        <el-dialog :visible.sync="dialogPvVisible" :title="dialogStatus=='create'?'添加商品':'修改商品'">
            <el-form
                ref="dataForm"
                :rules="rules"
                :model="temp"
                label-position="left"
                label-width="100px"
                style="width: 400px; margin-left:50px;"
            >
                <el-form-item label="商品名称" prop="commodity_name">
                    <el-input v-model="temp.commodity_name" />
                </el-form-item>
                
                <el-form-item label="价格" prop="price">
                    <el-input v-model="temp.price" />
                </el-form-item>
                
                
                <el-form-item class="pic" style="height:70px" label="照片" prop="url">
                    <el-upload
                        v-model="temp.url"
                        class="avatar-uploader"
                        action="http://101.132.154.10:8800/staff/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPvVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="btnloading"
                    @click="dialogStatus==='create'?createData():updateData()"
                >确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },

    methods: {
      handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            // this.$message(res);
            this.temp.url = res;
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt10M = file.size / 1024 / 1024 < 10;

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt10M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isLt10M;
        },
        getList() {
            var me = this;
            ajax('commodity/find_commodity', this.listQuery, function(data) {
                var arr = data.items;
                // var na = arr.map(function(v){return v.active;});
                for (var i = 0; i < arr.length; i++) {
                    // arr[i].active==1?arr[i].active='上架':arr[i].active='下架';
                    arr[i].url = 'http://101.132.154.10:8800/commodity/find_img?img_url=' + arr[i].url;
                }
                // console.log(arr);

                me.tableData = arr;
                me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
            });
        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },
        handleUpdate(row) {
            var me = this;
            
            if (row.active == 1) {
                ajax('commodity/update_commodity_active0', { id: row.id }, function(data) {
                    me.getList();
                });
            } else {
                ajax('commodity/update_commodity_active1', { id: row.id }, function(data) {
                    me.getList();
                });
            }
        },
        del_address(row) {
            var me = this;
            this.$confirm('永久删除该部门, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    ajax('department/del_department', { id: row.id }, function(data) {
                        if (data == 1) {
                            me.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            me.getTableData();
                        } else {
                            me.$message({
                                type: 'success',
                                message: '删除失败!'
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        resetTemp() {
            this.temp = {
                commodity_name: '',
                up_time: '',
                active: '',
                url: '',
                id: '',
                price: ''
            };
        },
        getTableData() {
            var me = this;
            ajax('commodity/find_commodity', this.listQuery, function(data) {
                me.dialogPvVisible = false;
                var arr = data.items;
                var na = arr.map(function(v) {
                    return v.active;
                });
                for (var i = 0; i < arr.length; i++) {
                    // arr[i].active==1?arr[i].active='上架':arr[i].active='下架';
                    arr[i].url = 'http://192.168.1.106:8800/commodity/find_img?img_url=' + arr[i].url;
                }
                // console.log(arr);

                me.tableData = arr;

                me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
            });
        },
        updateData() {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    var me = this;
                    this.btnloading = true;
                    ajax('department/upd_department', this.temp, function(data) {
                        me.getTableData();
                        me.dialogPvVisible = false;
                        me.btnloading = false;
                        me.$message({
                            title: '成功',
                            message: '修改成功',
                            type: 'success',
                            duration: 2000
                        });
                    });
                }
            });
        },
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        createData() {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    var me = this;
                    this.btnloading = true;
                    ajax('commodity/add_commodity', this.temp, function(data) {
                        me.getTableData();
                        me.dialogPvVisible = false;
                        me.btnloading = false;
                        me.$message({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        });
                    });
                }
            });
        },
        handleCreate() {
            this.dialogStatus = 'create';
            this.dialogPvVisible = true;
            this.resetTemp();
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate(); //清除验证
            });
        }
    },

    data() {
        return {
          imageUrl: '',
            listQuery: {
                pageNo: 1,
                pageSize: 10,
                commodity_name: ''
            },
            total: 100,
            rules: {
                commodity_name: [{ required: true, message: '部门姓名不能为空！', trigger: 'blur' }],
                up_time: [{ required: true, message: '上架时间不能为空！', trigger: 'blur' }],
                price: [{ required: true, message: '价格不能为空！', trigger: 'blur' }],
                active: [{ required: true, message: '状态不能为空！', trigger: 'blur' }],
                remark: [{ required: true, message: '备注不能为空！', trigger: 'blur' }],
                name: [{ required: true, message: '照片不能为空！', trigger: 'blur' }],
                address: [{ required: true, message: '详细部门不能为空！', trigger: 'blur' }],
                id: [{ required: true, message: 'id不能为空！', trigger: 'blur' }]
            },
            temp: {
                commodity_name: '',
                up_time: '',
                active: '',
                remark: '',
                url: '',
                price: '',
                id: ''
            },
            dialogStatus: 'create',
            dialogPvVisible: false,
            tableData: [],
            btnloading: false
        };
    },
    created() {
        var me = this;
        me.getTableData();
        me.getList();
    }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.pic >>> .el-upload--text {
    width: 180px;
}
</style>